<template>
  <div>
    <Table ref="dataTable" stripe :loading="table.loading" :columns="table.tableColumns" :data="table.tableRows" style="margin-top:20px;"
      @on-select="select" @on-select-cancel="selectCancel" @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel"
      @on-sort-change="changeSort"></Table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <Page :total="pager.total" :current="pager.pageNo" @on-change="changePageNo" @on-page-size-change="changePageSize"
          showSizer showTotal></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import * as utils from '@/api/utils-v2'

  export default {
    name: 'GraphicWalletDetailsTableMain',
    data() {
      return {
        urls: {
          searchUrl: '/graphic-wallet-details/admin/pager-cond',
          activeUrl: '/graphic-wallet-details/admin/active',
          removeUrl: '/graphic-wallet-details/admin/remove/'
        },
        pager: {
          pageNo: 1,
          pageSize: 10,
          total: 0
        },
        searchOpts: {
          sortColumn: null,
          sortOrder: null,
        },
        dataDictCodes: ['IS_ACTIVE'],
        dataDictItems: {},
        table: {
          loading: false,
          tableColumns: [
            // {
            //   type: 'selection',
            //   width: 52,
            //   key: 'id',
            //   align: 'center',
            //   fixed: 'left'
            // },
            // {
            //   width: 60,
            //   align: 'center',
            //   fixed: 'left',
            //   render: (h, params) => {
            //     return h('span', params.index + (this.pager.pageNo - 1) * this.pager.pageSize + 1)
            //   }
            // },
            // {
            //   title: '主键自增',
            //   key: 'id',
            //   minWidth: 120,
            //   sortable: true,
            //   render: (h, params) => {
            //     return h('span', {}, params.row.id)
            //   }
            // },
            {
              title: '图文店',
              key: 'graphicId',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.graphicValue)
              }
            },
            {
              title: '收入',
              key: 'usableRmbBalance',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.usableRmbBalance)
              }
            },
            {
              title: '创建时间',
              key: 'createTime',
              minWidth: 120,
              sortable: true,
              renderHeader: (h, params) => {
                return h('span', [
                  h('span', '创建时间'),
                  h('Tooltip', {
                    props: {
                      content: '流水创建时间',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  }, [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ])
                ])
              },
              render: (h, params) => {
                return h('span', {}, params.row.createTime)
              }
            },
            {
              title: '订单号',
              key: 'orderId',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.orderId)
              }
            },
            {
              title: '流水号',
              key: 'waterNo',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.waterNo)
              }
            }
          ],
          tableRows: [],
          selections: []
        }
      }
    },
    computed: {},
    mounted() {
      this.search()
    },
    methods: {
      search() {
        this.$emit('searchTable')
      },
      userOpt(itemName, row) {
        if (itemName === "showEdit") {
          this.$emit('showEditModal', JSON.parse(JSON.stringify(row)))
        } else if (itemName === "showDetail") {
          this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
        } else if (itemName === "remove") {
          utils.remove(this, row);
        }
      },
      active(row) {
        utils.active(this, row)
      },
      select(selections, row) {
        utils.select(this, selections, row)
      },
      selectCancel(selections, row) {
        utils.selectCancel(this, selections, row)
      },
      selectAll(selections) {
        utils.selectAll(this, selections)
      },
      selectAllCancel(selections) {
        utils.selectAllCancel(this, selections)
      },
      changeSort(sortColumn) {
        utils.changeSort(this, sortColumn)
      },
      changePageNo(pageNo) {
        utils.changePageNo(this, pageNo)
      },
      changePageSize(pageSize) {
        utils.changePageSize(this, pageSize)
      }
    }
  }
</script>

<style>
</style>
